<template>
  <transition name="fade">
    <div class="food-detail-wrapper" v-show="detailShow" ref="root">
      <div class="food-content-wrapper">
        <div class="food-content">
          <div class="food-img">
            <img v-lazy="food.image" @click="toggle"/>
            <div class="back" @click="toggle">
              <i class="fa fa-fw fa-chevron-left icon"></i>
            </div>
          </div>
          <div class="detail-content">
            <h1 class="title">{{food.name}}</h1>
            <div class="detail-remark">
              <span class="sell-count">月售{{food.sellCount}}份</span>
              <span class="rating"> 好评率{{food.rating}}%</span>
            </div>
            <div class="price">
              <span class="now">￥{{food.price}}</span>
              <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
            </div>
            <div class="cartControl-wrapper">
              <v-cartcontrol :food="food"></v-cartcontrol>
            </div>
            <div class="buy" v-show="!food.count || food.count === 0" @click="buy">
              加入购物车
            </div>

          </div>
        </div>
        <v-split></v-split>
        <div class="info" v-show="food.info">
          <h1 class="title">商品信息</h1>
          <p class="text">{{food.info}}</p>
        </div>
      </div>

    </div>
  </transition>
</template>

<script type="text/ecmascript-6">
  import cartcontrol from '../cartcontrol/cartcontrol.vue';
  import BScroll from 'better-scroll';
  import split from '@/components/split/split.vue';

  export default {
    name: 'fooddetail',
    props: {
      food: {type: Object}
    },
    data() {
      return {
        detailShow: false
      };
    },
    components: {
      'v-cartcontrol': cartcontrol, 'v-split': split
    },
    methods: {
      toggle() {
        this.detailShow = !this.detailShow;
        if (this.detailShow) {
          this.$nextTick(() => {
            if (!this.scroll) {
              this.scroll = new BScroll(this.$refs.root, {
                click: true
              });
            } else {
              this.scroll.refresh();
            }
          });
        }
      },
      buy() {
        this.$store.commit('ADD_CART', this.food);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .food-detail-wrapper
    position fixed
    bottom: 0
    top: 0
    bottom 48px
    z-index 5
    width 100%
    background #ffffff
    &.fade-enter-active, &.fade-leave-active
      transition: all 1s
    &.fade-enter, &.fade-leave-active
      opacity 0
    .food-content-wrapper
      .food-img
        position relative
        width 100%
        height 0
        padding-top 100%
        img
          position absolute
          top 0px
          width 100%
          height 100%
        .back
          position absolute
          top 10px
          left 0px
          .icon
            display block
            padding 10px
            color white
            font-size 10px
      .detail-content
        padding 18px
        position relative
        .title
          line-height 14px
          margin-bottom 8px
          font-size 14px
          font-weight 700
          color rgb(7, 17, 27)
        .detail-remark
          position relative
          margin-bottom 18px
          line-height 10px
          font-size 0
          height 10px
          .sell-count, .rating
            font-size 10px
            display inline-block
            color rgb(147, 153, 159)
          .sell-count
            margin-right 12px
        .price
          font-weight 700px
          line-height 24px
          .now
            margin-right 8px
            font-size 14px
            color rgb(240, 20, 20)
          .old
            font-size 10px
            color rgb(147, 153, 159)
            text-decoration line-through
        .cartControl-wrapper
          position absolute
          right 12px
          bottom 12px
        .buy
          position absolute
          right 18px
          bottom 18px
          z-index 10
          height 24px
          line-height 24px
          padding 0 12px
          box-sizing border-box
          border-radius 12px
          font-size 10px
          color #fff
          background rgb(0, 160, 220)

    .info
      padding 18px
      .title
        line-height 14px
        margin-bottom 6px
        font-size 14px
        color rgb(7, 17, 27)
      .text
        font-size 12px
        line-height 24px
        padding 0 8px
        color rgb(77, 85, 93)
</style>
